<template>
	<view class="leave_box">
    <navTitle :titleRight="'申請記錄'" :title="'發起申請'" :jumpUrl="jumpUrl"></navTitle>
    <view class="leave_container">
      <view class="row-p" style="margin-top: 10px;" @tap="changeVacationType()">
        <view class="r-p-l">請假類型</view>
        <view class="r-p-r" v-if="vacationList.length>0">
          <view class="r-qj">{{vacationList[vacationIndex].name}}<text v-if="vacationList[vacationIndex].num>0">（剩余{{vacationList[vacationIndex].num}}{{vacationList[vacationIndex].unit=='hour'?'小时':'天'}}）</text></view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="row-p" @tap="showCalendar=true">
        <view class="r-p-l">開始時間
        </view>
        <view class="r-p-r">
          <!-- <view v-if="startDate" class="txt-r">{{ startDate }}</view> -->
          <uni-datetime-picker type="datetime" v-model="startDate" placeholder="請選擇開始時間" @change="changeCalendar" />
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="row-p">
        <view class="r-p-l">結束時間
        </view>
        <view class="r-p-r">
          <!-- <view class="txt-r" v-if="endDate">{{ endDate }}</view> -->
          <uni-datetime-picker type="datetime" v-model="endDate" placeholder="請選擇結束時間" @change="changeCalendarEnd" />
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="row-p">
        <view class="r-p-l">時長({{ `${vacationList.length>0?vacationList[vacationIndex].unit=='hour'?'小時':'天':''}` }})
        </view>
        <view class="r-p-r">
          <view class="txt-input">
            <input type="digit" placeholder="請輸入請假時長" v-model.trim="hours"/>
          </view>
        </view>
      </view>
      <view class="yy-box">
        <view class="yy-title">請假事由</view>
        <textarea
            class="reason-content"
            v-model="reason"
            maxlength="120"
            placeholder="請輸入請假事由"
            placeholder-class="input--pl"
            fixed
          ></textarea>
          <view class="charCount">{{reasonLen}}/200</view>
      </view>
      <view class="row-imgs">
        <view class="p-imgs">
          <view class="r-p-l no">图片</view>
          <img src="/static/images/boss/icon_b_arrow_add_img.png" @tap="openChoose()" mode="scaleToFill" alt="">
        </view>
        <view class="map-imgs" v-if="upload_list.length>0">
          <view class="map-img" v-for="(item,index) in upload_list" :key="index">
            <img :src="item" mode="scaleToFill" alt="">
            <img class="img-del" src="/static/images/boss/icon_xc_close.png" @tap="handleImg(item,index)" mode="scaleToFill" alt="">
          </view>
        </view>
      </view>
      <view class="yy-box" v-if="false">
        <view class="yy-title">審批流程</view>
        <view class="step-box">
          <view class="s-b-l">
            <u-steps :current="stepsCurrent" direction="column" :list="steps" activeColor="#1C7AF7" mode="dot"></u-steps>
          </view>
          <view class="s-b-r">
            <view>冶裕振</view>
            <view>懷良慶</view>
          </view>
        </view>
      </view>
      <view class="nav-footer" @tap="submitApply()">
        <view class="item-footer">提交申請</view>
      </view>
    </view>
	</view>
</template>

<script>
import { askleaveType,askleaveApply } from '../../utils/api'
import navTitle from './components/nav-title.vue';
export default {
	components: {navTitle},
	data() {
		return {
      jumpUrl:'/pages/boss/leaveRecord',
			showCalendar: false,
      reason:'',
      stepsCurrent:-1,
      steps: [
				{
					name: '直接主管：'
				},
				{
					name: '總經理：'
				}
			],
      vacationIndex:0,
      vacationList:[],
      startDate:'',
      endDate:'',
      upload_list:[],
      hours:0,
		};
	},
	props: {
		couponList: {}
	},
	computed: {
    reasonLen() {
      return this.reason.length
    },
    timeDays(){
    }
  },
  onLoad(options) {
    this.vacationIndex=options.index
  },
  onShow() {
    this.getAskleaveTypeList()
  },
	methods: {
    openChoose(){
      let that=this
      uni.chooseImage({
        // original 原图， compressed 压缩图，默认二者都有
        sizeType: ["original", "compressed"],
        // camera 使用相机，album 从相册中选图，默认二者都有
        sourceType: ["camera", "album"],
        count:1,
        // success是必须要写的
        success: function (res) {
          const tempFiles = res.tempFiles
          const tempFilePaths = res.tempFilePaths
          uni.uploadFile({
            url: `${that.$imgUrl}/api/common/upload`,
            filePath: tempFilePaths[0],
            header: {
              token: uni.getStorageSync('token')
            },
            name: "file",
          }).then(res => {
            let data = JSON.parse(res.data)
            if(data.code==1){
              that.upload_list.push(data.data.fullurl)
            }else{
              uni.showToast({
                icon:'none',
                title: data.msg||'系統異常'
              })
            }
          })
        }
      })
    },
    async getAskleaveTypeList(){
      let res=await askleaveType({})
      if(res.code==1){
        this.vacationList=res.data
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        });
      }
    },
    submitApply(){
      let that=this
      uni.showModal({
        title: '提示',
        content: `確定提交請假申請嗎？`,
        success: res => {
          that.submitForm()
        }
      });
    },
    async submitForm(){
      let that=this
      if(!that.startDate){
        uni.showToast({
          icon:'none',
          title: '請選擇開始時間'
        });
        return false
      }
      if(!that.endDate){
        uni.showToast({
          icon:'none',
          title: '請選擇結束時間'
        });
        return false
      }
      if(that.reasonLen==0){
        uni.showToast({
          icon:'none',
          title: '請輸入請假事由'
        });
        return false
      }
      let params={
        type:that.vacationList[that.vacationIndex].id,
        begin_time:new Date(that.startDate).getTime()/1000,
        end_time:new Date(that.endDate).getTime()/1000,
        hours:that.hours,
        hours_unit:that.vacationList[that.vacationIndex].unit=='day'?1:2,
        description:that.reason,
        image:that.upload_list.length>0?that.upload_list.length>1?that.upload_list.join(','):that.upload_list[0]:''
      }
      let res=await askleaveApply(params)
      if(res.code==1){
        uni.navigateBack()
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
    changeCalendar(e) {
      this.startDate=e
		},
    changeCalendarEnd(e) {
      this.endDate=e
		},
    handleImg(item,index){
      this.upload_list=this.upload_list.filter((v,i)=>i!=index)
    },
    changeVacationType(){
      let that=this
      uni.showActionSheet({
        itemList: that.vacationList.map(v=>{return v.name}),
        title:'請假類型',
        success: ({ tapIndex }) => {
          this.vacationIndex=tapIndex
        },
        fail: (error) => {}
      })
    }
	}
};
</script>
<style lang="scss" scoped>
.leave_box{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #F4F6FA;
}
.row-p{
  width: calc(100% - 40px);
  padding: 15px 10px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}
.r-p-l{
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 15px;
  color: #333333;
  line-height: 23px;
  padding-left: 13px;
  position: relative;
  view{
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    margin-left: 30px;
  }
}
.r-p-l.no{
  padding-left: 0;
}
.r-p-l::after{
  content: '*';
  position: absolute;
  top: -1px;
  left: 0;
  color: #FF2727;
}
.r-p-l.no::after{
  content: '';
}
::v-deep .r-p-r{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .txt-input{
    input{
      text-align: right;
    }
  }
  .r-qj{
    margin-right: 8px;
  }
  .txt-r{
    font-size: 15px;
    color: #333333;
    line-height: 23px;
    margin-right: 10px;
  }
  view.txt-gray{
    font-size: 13px;
    color: #999999;
    line-height: 23px;
    margin-right: 0;
  }
  img{
    width: 8px;
    height: 14px;
  }
  .uni-date-x--border{
    border: none;
    margin-right: 8px;
  }
}
.yy-box{
  width: calc(100% - 40px);
  padding: 15px 10px;
  margin: 10px auto 10px;
  background: #fff;
  border-radius: 10px;
}
.yy-title{
  font-size: 15px;
  color: #333333;
  line-height: 23px;
}
.reason-content{
  width: 100%;
  font-size: 15px;
  color: #333333;
  line-height: 23px;
  height: 90px;
  margin: 10px 0;
}
.input--pl{
  font-size: 14px;
  color: #999999;
}
.charCount{
  text-align: right;
  font-size: 14px;
  color: #999999;
  line-height: 14px;
}
.row-imgs{
  width: calc(100% - 40px);
  padding: 15px 10px;
  margin: 0 auto 10px;
  border-radius: 10px;
  font-size: 15px;
  color: #333333;
  line-height: 23px;
  background: #fff;
  .p-imgs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width:22px;
      height: 22px;
    }
  }
  .list-imgs{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 15px;
    img{
      width: 70px;
      height: 70px;
      border-radius: 10px;
      margin-right: 14px;
      display: block;
    }
  }
}
.step-box{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .s-b-l{
    width: 89px;
  }
  .s-b-r{
    width: 100px;
    font-size: 14px;
    color: #666666;
    view{
      line-height: 20px;
      height: 20px;
      margin: 22px 0 40px;
    }
    view:last-child{
      margin-bottom: 0;
    }
  }
}
.nav-footer{
  width: 100%;
  height: 49px;
  overflow: hidden;
  margin-top: 20px;
}
.item-footer{
  width: calc(100% - 20px);
  height: 44px;
  background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
  border-radius: 8px;
  margin: 2px auto;
  font-weight: bold;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 44px;
  text-align: center;
}
.map-imgs{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 15px;
}
.map-img{
  width: 25%;
  height: 70px;
  position: relative;
  img{
    width: 70px;
    height: 70px;
    border-radius: 6px;
  }
  img.img-del{
    width: 14px;
    height: 14px;
    position: absolute;
    top: -7px;
    left: 63px;
  }
}
</style>
